<div *ngIf="indicatorIndex === 0" class="row bold">
    <div class="col-7 offset-5">
        <div class="row">
            <div class="col text-center">Raw Score</div>
            <div class="col text-center">Weight</div>
            <div class="col text-center">Weighted Score</div>
        </div>
    </div>
</div>

<div class="row d-flex align-items-center item-link p-2 mt-2 bg-light-grey" (click)="collapseToggle(indicator.code);">
    <div class="col-5">
        <div class="text-link">
            {{ indicator.name }}
        </div>
    </div>
    <div class="col-7">
        <div class="row">
            <div *ngFor="let column of columns; let i = index" class="col numeric-column">
                <span *ngIf="column.showRating" [ngClass]="{'boldRating': column.boldRating}">
                    {{formatValue(indicator, column)}}
                </span>
                <span *ngIf="indicator[column.valueField] && indicator[column.valueField].clusterName" [ngClass]="{'boldRating': column.boldRating}">
                    {{indicator[column.valueField].clusterName}}
                </span>
            </div>
        </div>
    </div>
</div>

<app-modal [id]="'indicator' + getCleanIndicatorCode(indicator.code)" [size]="'modal-xl'">
    <div class="app-modal-header">
        Indicator Details
    </div>
    <div class="app-modal-body">
        <div *ngIf="indicatorDetails != undefined" class="modal-body indicator-modal">
            <div class="container-fluid">

                <div class="row d-flex align-items-center">
                    <div class="col-sm-6">
                        <div class="indicator-name">
                            <span *ngIf="displayCode">{{ indicator.code | strReplace:'_':'.' }} </span>
                            {{ indicator.name }}
                        </div>
                    </div>
                    <div *ngIf="indicator.weightedScore" class="col-sm-6">

                        <div class="row d-flex align-items-center value">
                            <div class="col-3">
                                {{ indicator.score.value | number:'1.0-0' }}
                            </div>
                            <div class="col-3 offset-1">
                                {{ indicator.weight.value | number:'1.1-1' }}%
                            </div>
                            <div class="col-4 offset-1">
                                {{ indicator.weightedScore.value | number:'1.1-1' }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4">Raw Score</div>
                            <div class="col-4">Weight</div>
                            <div class="col-4">Weighted Score</div>
                        </div>
                    </div>
                </div>

                <div *ngIf="indicatorDetails.answerCategoryText" class="text-center pt-3 indicator-name">
                    <hr />
                    <div class="pl-5 pr-5 pt-2">{{ indicatorDetails.answerCategoryText }}</div>
                </div>

                <div *ngIf="indicatorDetails.comment" class="pt-2">
                    <hr />
                    <div [innerHtml]="indicatorDetails.comment"></div>
                </div>
                <table *ngIf="dataTableNames.length > 0">
                    <thead>
                        <tr>
                            <th></th>
                            <th *ngFor="let year of dataTableYears" class="dataTableCell">{{year}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let name of dataTableNames">
                            <td>{{name}}</td>
                            <td *ngFor="let year of dataTableYears" class="dataTableCell">{{getTableValue(name, year)}}</td>
                        </tr>
                    </tbody>
                </table>
                <div *ngIf="indicatorDetails.checkBoxes.length > 0" class="pt-2">
                    <hr class="pb-2" />
                    <h5>Criteria</h5>

                    <div class="row pt-2">
                        <div *ngFor="let group of tickboxGroups" class="col-6">
                            <div *ngFor="let checkbox of group" class="d-flex">
                                <input type="checkbox" disabled="disabled" [checked]="checkbox.isChecked" class="float-left mt-1 mr-3" />
                                <label>{{ checkbox.text }}</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div *ngIf="indicatorDetails.sources?.length > 0" class="pt-3">
                    <hr />
                    <h5>Sources</h5>
                    <div *ngFor="let source of indicatorDetails.sources" class="mb-2">{{ source }}</div>
                </div>
            </div>
        </div>
    </div>
</app-modal>